<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        disabled
        title="综合"
      />
      <van-dropdown-item v-model="value1" :options="option1" title="价格" 
        @change="priceChange"
      />
      <van-dropdown-item
        v-model="value2"
        :options="filterCategor"
        title="分类"
        @change="chanCategroyList"
      />
    </van-dropdown-menu>

    <!-- 如果没有商品就展示空状态组件,否则展示Product -->
    <van-empty v-if="goodsListApply.length==0" description="对不起,没有该商品!" />
    <Product v-else :goodsListApply="goodsListApply" />
  </div>
</template>

<script>
import Product from "../../components/home/Product";
export default {
  props: ["goodsListApply", "filterCategor"],
  components: {
    Product,
  },
  data() {
    return {
      value1: "desc",
      value2: "",
      option1: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
      // option2: [
      //   { text: "默认排序", value: "a" },
      //   { text: "好评排序", value: "b" },
      //   { text: "销量排序", value: "c" },
      // ],
    };
  },
  methods:{
      // /根据价格高低筛选数据
      priceChange(value){
          console.log(value);
          this.$emit("priceChange",value)
      },

    //分类的值改变时,调用父组件的方法,传入当前的id值给父组件方法,
    // 通过调用父组件的方法发送请求,并把id当作去请求头发送给后端,返回对应的id数据
    // @change方法拿到的时当前改变时的id
    chanCategroyList(value){
        console.log(value);
      this.$emit("chanCategroyList",value)
    } 
  },
  beforeUpdate() {
    this.filterCategor.map(item=>{
      //如果后端给的filterCategor数据中的checked为true的情况下，那么当前的value2的值等于checked为true的拿一些value值，也就是id（map遍历过的新值）
        if(item.checked){
            this.value2=item.value
        }
    })
  },
  updated() {

  },
};
</script>
 
<style lang = "less" scoped>
</style>